{{include './header'}}
<link rel="stylesheet" href="./css/shop.css">
<div class="container">
    {{if data.length}}
    <table class="table table-bordered text-center">
        <tr class="allgoods active">
            <td>
                <input type="checkbox" name="" id="" class="all">
                <label for="" class="all">全选</label>
            </td>
            <td class="goods" style="text-align: start;height: 50px;"><span class="title">商品</span></td>
            <td>单价</td>
            <td>数量</td>
            <td>小计</td>  
            <td>操作</td>
        </tr>
        {{each data.reverse() obj}}
        <tr class="showgoods">
            <td>
                <input type="checkbox" name="" id="" class="radio">
            </td>
            <td class="goods">
                <img src="./bookimg/{{obj.pic}}" alt="">
                <div>
                    <span class="bookname">{{obj.bookname}}</span>
                    <p style="text-align: start;" class="author">{{obj.author}}</p>
                </div>
            </td>
            <td class="price">￥{{obj.price.toFixed(2)}}</td>
            <td>
                <span class="changeNum">
                    <span class="reduce">-</span>
                    <textarea name="" id="" cols="1" rows="1" class="salenum">{{obj.sum}}</textarea>
                    <span class="add">+</span>
                </span>
            </td>
            <td class="sum"><strong>￥</strong><b>{{obj.nowprice.toFixed(2)}}</b></td>
            <td>
                <div class="remove">删除</div>
            </td>
        </tr>
        {{/each}}
        <tr class="allgoods active control">
            <td>
                <input type="checkbox" name="" id="" class="all" style="position: relative;top: 4px;">
                <label for="" class="all" style="position: relative;top: 2px;">全选</label>
            </td>
            <td class="goods" style="text-align: center; height: 60px;" ><span class="title" style="left: -170px;">删除选中的商品</span></td>
            <td><span style="position: relative;left: -350px;">清理购物车</span></td>
            <td><div style="position: relative;left: 100px;">已选<span class="count"></span>件商品</div></td>
            <td><div style="position: relative;left: 30px;">总计<span class="totalprice"></span></div></td>
            <td class="settlement">去结算</td>
        </tr>
    </table>
    {{else}}
    <h3 style="color: red;">购物车空空如也...</h3>
    {{/if}}
</div>
<script>
    // 单选
    $('.showgoods input').change(function () {
        if ($(this).prop('checked')) {
            $(this).parents().eq(1).addClass('selected')
        } else {
            $(this).parents().eq(1).removeClass('selected')
        }
        // 全选状态
        if ($('.showgoods input').length == $('.showgoods :checked').length) {
            $('.allgoods input').prop('checked', true)
        } else {
            $('.allgoods input').prop('checked', false)
        }
    })
    // 全选
    $('.allgoods input').change(function () {
        $('.allgoods input').prop('checked', $(this).prop('checked'))
        $('.showgoods input').prop('checked', $(this).prop('checked'))
        $('.showgoods input').each((i, item) => {
            let every = $(item).parents().eq(1);
            $(this).prop('checked') ? every.addClass('selected') : every.removeClass('selected')
        })
    })

    // 修改订单数量
    var num = 1;

    function updateshop(target) {
        let nowprice = num * target.parents().eq(2).find('.price').text().replace('￥', '') * 1
        let obj = {
            pic: target.parents().eq(2).find('img').attr('src').replace('./bookimg/', ''),
            author: target.parents().eq(2).find('.author').text(),
            bookname: target.parents().eq(2).find('.bookname').text(),
            username: username,
            sum: target.parents().eq(2).find('.salenum').val(),
            price: target.parents().eq(2).find('.price').text().replace('￥', ''),
            nowprice: nowprice
        }
        $.post('/updatebooknum', obj, data => {
            if (data.code == 1) {
                target.val(num)
                target.parents().eq(2).find('.sum').text('￥' + nowprice.toFixed(2))
                countGoods()
            }
        })

    }
    // 输入数量修改
    $('.salenum').blur(function () {
        if (!isNaN($(this).val() * 1) && $(this).val() * 1 > 0 && $(this).val() * 1 % 1 == 0) {
            num = $(this).val() * 1
        }
        updateshop($(this))
    })
    // 加一或减一修改
    $('.changeNum span').click(function () {
        num = $(this).parent().find('.salenum').val() * 1
        num = $(this).index() ? num + 1 : num - 1
        num = num <= 1 ? 1 : num
        $(this).parent().find('.salenum').val(num)
        updateshop($(this).parent().find('.salenum'))
    })
    // 移除订单
    $('.remove').click(function () {
        console.log();
        let bookname = $(this).parents().eq(1).find('.bookname').text()
        $.get('/removeshopcar?bookname=' + bookname + '&username=' + username, data => {
            if (data.code == 1) {
                $('#showinfo').modal('show').find('.modal-body').text(data.msg)
                $('#showinfo').on('hide.bs.modal', function () {
                    location.reload()
                })
            }
        })
    })

    function countGoods() {
        // 算商品总数量
        let countArr = []
        for (let i = 0; i < $('.salenum').length; i++) {
            countArr.push($('.salenum').eq(i).val() * 1)
        }
        let res = countArr.reduce((total, val) => {return total + val}, 0)
        $('.count').text(res)
        arr = []
        // 算商品总价
        let  priceArr=[];
        for (let i = 0; i < $('.sum').length; i++) {
            priceArr.push($('.sum').eq(i).text().replace('￥','')*1)
        }
        let totalprice = priceArr.reduce((total2, val2) => {return total2 + val2}, 0)
        $('.totalprice').text('￥'+totalprice.toFixed(2))
        priceArr=[]
    }
    countGoods()
</script>
</body>

</html>